<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条件判断</title>
</head>
<body>
<div id="app">
  <p>
    template标签 是vue提供的，没有实际意义，用来包裹元素<br>
    v-show不支持template,只有v-if使用<br>
  </p>

  <template v-if="flag">
    <div>我帅</div>
    <div>我帅</div>
    <div>我帅</div>
  </template>
  <div v-else="">我很帅</div>

  <p>
    <h2>默认情况下在切换dom时相同的结构会被复用，如果不需要复用 需要加key</h2><br>
  <button @click="cut=!cut">点我</button>
  <template v-if="cut">
      <label for="reg">注册</label>
      <input type="text" id="reg" key="1">
  </template>

  <template v-else>
    <label for="reg2">登录</label>
    <input type="text" id="reg2" key="2">
  </template>
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      flag:true,
      cut:true

    }
  })
</script>
</html>
